import {View} from "@tarojs/components";
import {useEffect, useState} from "react";
import Taro from "@tarojs/taro";
import styles from "./order_detail.module.scss"
import {request} from "../../utils/request";
import {apis} from "../../constants/apis";
import EventBus from "../../envent_bus/event_bus";
import {OrderFinishBackMyOrders} from "../../envent_bus/events";

const OrderDetail = () => {
  const [orderInfo, setOrderInfo] = useState<any>({});

  useEffect(() => {
    if (Taro.getCurrentInstance().router?.params) {
      const parmas: any = Taro.getCurrentInstance().router?.params
      let data = JSON.parse(decodeURIComponent(parmas.data));
      setOrderInfo(data)
    }
    return () => {
      EventBus.fire(OrderFinishBackMyOrders.eventName, new OrderFinishBackMyOrders());
    }
  }, []);

  const confirmOrder = () => {
    Taro.showModal({
      title: '提示',
      content: "请确认商品已领取",
      success: (res) => {
        if (res.confirm) {
          request({
            url: apis.FINISH_ORDER,
            data: {
              id: orderInfo.id,
            },
            pureData: false,
          }).then(res => {
            if (res.code === 200) {
              Taro.showToast({
                icon: 'success',
                title: "订单已完成"
              })
              Taro.navigateBack();
            }
          })
        }
      }
    })
  };

  const refundOrder = () => {
    const orderCreatedTime = new Date(orderInfo.createdTime).getTime();
    const nowTime = new Date().getTime();
    if ((nowTime - orderCreatedTime) / 1000 / 60 / 60 >= 48) {
      Taro.showModal({
        title: "抱歉",
        content: "已超过48小时，请电话联系商家"
      });
      return;
    }
    let data = JSON.stringify(orderInfo);
    Taro.navigateTo({
      url: `../refund_order/refund_order?data=${encodeURIComponent(data)}`,
    });
  }


  return (
    <View className="container">
      <View className="iconfont icon-wancheng"
            style={{fontSize: "150rpx", color: "rgb(255,229,116)", marginTop: "50rpx"}}/>
      <View
        className="text-large">{orderInfo.orderStatus === 'FIN' ? '订单已完成' : orderInfo.orderStatus === 'UNFIN' ? '订单已提交' : orderInfo.orderStatus === 'REFUNDED' ? '已退款' : '退款中'}</View>

      <View className={styles.detail_container}>
        <View className={styles.container_item}>
          <View className="text-medium">订单号</View>
          <View>{orderInfo.id}</View>
        </View>

        <View className={styles.container_item}>
          <View className="text-medium">出餐情况</View>
          <View>{orderInfo.isGoOut === 0 ? '未出餐' : '已出餐'}</View>
        </View>

        <View className={styles.container_item}>
          <View className="text-medium">收货地址</View>
          <View className="text-medium">{orderInfo.customerAddress === '' ? '堂食' : orderInfo.customerAddress}</View>
        </View>

        <View className={styles.container_item}>
          <View className="text-medium">备注</View>
          <View className="text-medium">{orderInfo.notes === '' ? "无" : orderInfo.notes}</View>
        </View>

        <View style={{display: orderInfo.waimai == 1 ? 'none' : 'flex'}} className={styles.container_item}>
          <View className="text-medium">配送方式</View>
          <View className="text-medium">商家配送</View>
        </View>

        <View className={styles.container_item}>
          <View className="text-medium">支付方式</View>
          <View className="text-medium">微信</View>
        </View>

        <View className={styles.container_item}>
          <View className="text-medium">下单时间</View>
          <View className="text-medium">{orderInfo.createdTime}</View>
        </View>

      </View>

      {orderInfo.orderStatus === 'UNFIN' &&
      <View onClick={confirmOrder} className={`${styles.confirm_send_btn} item-click`}>确认已送达</View>
      }

      {(orderInfo.orderStatus !== 'REFUNDED' && orderInfo.orderStatus !== 'REFUNDING') &&
      <View onClick={refundOrder} className={`${styles.confirm_send_btn} item-click`}>申请退款</View>
      }


    </View>
  )
};
export default OrderDetail;
